<template>
  <div>
    <div class="main car-detail">
      <div class="car-detail-bread">首页 ·
        <!-- -->上海
        <!-- -->找车 · 精准找车 ·
        <!-- -->特斯拉MODEL X 电动车
      </div>

      <div class="car-slide-panel">
        <div class="car-detail-banxin car-slide-panel-slide">

          <el-carousel indicator-position="outside"
                       :height="405 +'px'">
            <el-carousel-item v-for="(item,index) in list"
                              :key="index">
              <img :src="item.imgPath"
                   @click="jump()"
                   :width="640 +'px'">
            </el-carousel-item>
          </el-carousel>

        </div>
        <div class="car-slide-panel-info-wrapper">
          <div>
            <div class>
              <div class="car-slide-panel-info">
                <h2 class="car-slide-panel-info-price"><span class="car-slide-panel-info-price-symbol">¥</span>1233<span class="car-slide-panel-info-price-day">/天</span><span class="car-slide-panel-info-oldprice">¥
                    <!-- -->1233
                    <!-- -->/天
                  </span></h2>
                <h1 class="car-slide-panel-info-title">特斯拉MODEL X 电动车<span class="car-slide-panel-info-title-zi"></span></h1>
                <div class="ant-anchor-wrapper"
                     style="max-height:calc(100vh - 145px)">
                  <div class="ant-anchor fixed">
                    <div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
                    <div class="ant-anchor-link"><a class="ant-anchor-link-title"
                         href="#carDetailCalendar"
                         title>
                        <div class="car-slide-panel-info-time-wrapper">
                          <div class="car-slide-panel-info-time-wrapper-btn">租用时间</div>
                        </div>
                      </a></div>
                  </div>
                </div>
                <div class="car-slide-panel-info-qrcode-btn">扫码下单吧 ↓</div>
                <div class="qrcode-con clearfix">
                  <div class="qrcode-con-text zfb-text fl">
                    <div class="channel-img"><img class="channel-img-icon"
                           src="https://auto-static-pro.oss-cn-hangzhou.aliyuncs.com/miniprogram/cardetail-zfb-icon.png"></div>
                    <h5>支付宝扫码</h5>
                    <p>信用免押</p>
                    <p>先租后付</p>
                  </div>
                  <div class="car-slide-panel-info-qrcode-wrapper fl"><img src="../../assets/images/getQrCodePic.jpg"
                         alt="qrcode"></div>
                  <div class="qrcode-con-text weixin-text fl">
                    <div class="channel-img"><img class="channel-img-icon"
                           src="https://auto-static-pro.oss-cn-hangzhou.aliyuncs.com/miniprogram/cardetail-weixin-icon.png"></div>
                    <h5>微信扫码</h5>
                    <p>神秘礼包</p>
                    <p>微信专享</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class>
          <div class="car-detail-banxin car-info-header clearfix ant-anchor-wrapper"
               style="max-height:calc(100vh - 85px)">
            <div class="ant-anchor">
              <div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
              <div class="car-info-header-item ant-anchor-link"><a class="ant-anchor-link-title"
                   href="#carDetailBase"
                   title="基本信息">基本信息</a></div>
              <div class="car-info-header-item ant-anchor-link"><a class="ant-anchor-link-title"
                   href="#carDetailCalendar"
                   title="租用时间">租用时间</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="car-detail-banxin car-detail-border-top car-detail-info-base">
        <h1 id="carDetailBase"
            class="car-detail-info-base-title">特斯拉MODEL X 电动车<span class="car-slide-panel-info-title-zi"></span><span class="car-detail-info-base-title-count">已租
            <!-- -->4
            <!-- -->次
          </span></h1>
        <div class="car-detail-info-base-tags"><img src="https://carphoto.atzuche.com/system/car/detail/3x/zhichi_songqu_v643@3x.png"
               alt="凹凸租车"
               style="height:19px;width:50px"><img src="https://carphoto.atzuche.com/system/car/detail/3x/licheng_youxuan_v643@3x.png"
               alt="凹凸租车"
               style="height:19px;width:50px"><img src="https://carphoto.atzuche.com/system/car/detail/3x/xinyong_shuangmian_v643@3x.png"
               alt="凹凸租车"
               style="height:19px;width:50px"><img src="https://carphoto.atzuche.com/system/car/detail/3x/anxin_baozhang_v643@3x.png"
               alt="凹凸租车"
               style="height:19px;width:50px"><img src="https://carphoto.atzuche.com/system/car/detail/3x/shoucang_zuiduo_v643@3x.png"
               alt="凹凸租车"
               style="height:19px;width:50px"><img src="https://carphoto.atzuche.com/system/car/detail/3x/liji_queren_v643@3x.png"
               alt="凹凸租车"
               style="height:19px;width:50px"></div>
        <div class="car-detail-info-base-infos"><span class="car-detail-info-base-infos-num">沪A****28</span><span class="car-detail-info-base-infos-age">4年车龄</span><span class="car-detail-info-base-infos-limit">日均限300km</span><span class="car-detail-info-base-infos-rent">中秋节2天起租</span></div>
      </div>
      <div id="carDetailCalendar"
           class="car-detail-banxin car-detail-border-top car-detail-info-calendar">
        <h2 class="car-detail-info-title">租用时间</h2>
        <div class="block">
          <el-date-picker v-model="time"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Panamera',
  data () {
    return {
      banH: 426,
      time: '',
      list: [
        {
          imgPath: '//carphoto.atzuche.com/car/20/12/670837282/1611537499871_1.jpg'
        },
        {
          imgPath: '//carphoto.atzuche.com/car/20/12/670837282/1611714632685_2.jpg'
        },
        {
          imgPath: '//carphoto.atzuche.com/car/20/12/670837282/1611537488964_3.jpg'
        },
        {
          imgPath: '//carphoto.atzuche.com/car/20/12/670837282/1611537494927_4.jpg'
        },
        {
          imgPath: '//carphoto.atzuche.com/car/20/12/670837282/1612324369194_5.jpg'
        },
        {
          imgPath: '//carphoto.atzuche.com/car/20/12/670837282/1612324602542_6.jpg'
        },
        {
          imgPath: '//carphoto.atzuche.com/car/20/12/670837282/1623038594858_7.jpg'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/style.css';
</style>
